<template>
  <div class="max-w-md mx-auto py-12">
    <h2 class="text-2xl font-bold mb-6 text-center">{{ $t('auth.register') }}</h2>
    
    <form @submit.prevent="handleRegister" class="space-y-6">
      <div>
        <label class="block text-sm font-medium">{{ $t('email') }}</label>
        <input
          v-model="form.email"
          type="email"
          required
          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>

      <div>
        <label class="block text-sm font-medium">{{ $t('password') }}</label>
        <input
          v-model="form.password"
          type="password"
          required
          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>

      <div>
        <label class="block text-sm font-medium">{{ $t('confirm_password') }}</label>
        <input
          v-model="form.confirmPassword"
          type="password"
          required
          class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
        />
      </div>

      <button
        type="submit"
        class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
      >
        {{ $t('auth.register') }}
      </button>

      <div class="mt-4 text-center">
        <NuxtLink
          to="/auth/login"
          class="text-blue-600 hover:text-blue-800 text-sm"
        >
          {{ $t('auth.login') }}
        </NuxtLink>
      </div>
    </form>
  </div>
</template>

<script setup>
const { $toast } = useNuxtApp()
const form = reactive({
  email: '',
  password: '',
  confirmPassword: ''
})

const validateForm = () => {
  if (form.password !== form.confirmPassword) {
    $toast.error('PASSWORD_MISMATCH')
    return false
  }
  return true
}

const handleRegister = async () => {
  if (!validateForm()) return
  
  try {
    await $fetch('/api/auth/register', {
      method: 'POST',
      body: {
        email: form.email,
        password: form.password
      }
    })
    
    $toast.success('REGISTRATION_SUCCESS')
    await navigateTo('/auth/login')
  } catch (error) {
    $toast.error(error.data?.statusMessage || 'Registration failed')
  }
}
</script>

<style lang="scss" scoped>
@media (max-width: 640px) {
  .max-w-md {
    width: 90%;
    padding: 1rem;
  }
}
</style>